/*
 * @Author: Jiraiya
 * @Date: 2020-03-30 17:18:07
 * @LastEditors: Jiraiya
 * @LastEditTime: 2020-03-31 15:17:04
 * @Description: 
 */
import * as React from 'react';
import ReactDOM from 'react-dom';
import Loadable from './Loadable';
import Loading from './loading';
const ComponentA = Loadable({
    loader: () => import(
        /* webpackChunkName: 'componentA' */
        './componentA.js'),
    loading: Loading, //异步组件未加载之前loading组件
    delay: 1000, //异步延迟多久再渲染
    timeout: 1000, //异步组件加载超时
})
ComponentA.preload(); //预加载异步组件的方式

const ComponentB = Loadable({
    loader: () => import(
        /* webpackChunkName: 'componentB' */
        './componentB.js'),
    loading: Loading, //异步组件未加载之前loading组件
})

Loadable.preloadAll().then(() => {
    //
}).catch(err => {
    //
}); //预加载所有的异步组件

const App = (props) => {
    const [isDisplay, setIsDisplay] = React.useState(false);
    if(isDisplay){
        return <React.Fragment>
            <ComponentA />
            <ComponentB />
        </React.Fragment> 
    }else{
        return <input type='button' value='点我' onClick={()=>{setIsDisplay(true)}}/>
    }
}

ReactDOM.render(<App />, document.getElementById('app'));